<template>
	<scroll-view class="prompt-list" :scroll-x="false" :scroll-y="true" :scroll-with-animation="true" :scroll-top="scrollTop" @scroll="onScroll">
		<view class="lists" v-if="promptList && promptList.length > 0">
			<view class="prompt-item" v-for="(item, index) in promptList" :key="index">
				<view @tap="toWriteChat" :data-id="item.id">
					<view class="title">
						<image v-if="item.thumb" class="icon" :src="item.thumb"></image>
						<text>{{item.title}}</text>
					</view>
					<view class="desc">{{ item.desc }}</view>
				</view>
		
				<view class="ops">
					<view class="op-item">
						<image class="icon" src="/static/images/write/ic_views.png"></image>
						{{ item.views }}
					</view>
					<view class="op-item">
						<image class="icon" src="/static/images/write/ic_usages.png"></image>
						{{ item.usages }}
					</view>
					<view class="op-item" @tap="doVote" :data-id="item.id">
						<image v-if="item.isVote == 1" class="icon" src="/static/images/write/ic_vote_active.png">
						</image>
						<image v-else class="icon" src="/static/images/write/ic_vote.png"></image>
					</view>
				</view>
			</view>
			<view style="clear: both"></view>
		</view>
		
		<view class="empty" v-else>
			<image src="/static/images/nodata.png"></image>
		</view>
		
		<view v-if="promptList && promptCount > pagesize" style="padding: 30rpx 0 30rpx 0; width: 100%">
			<pages :count="promptCount" :pagesize="pagesize" :page="page" @change="pageChange"></pages>
		</view>
	</scroll-view>
</template>


<script>
	const app = getApp();
	export default {
		props: {
			topicId: {
				type: Number/String,
				default: ''
			},
			topicIndex: {
				type: Number,
				default: 0
			},
			activeTopicIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				promptList: null,
				promptCount: 0,
				page: 1,
				pagesize: 20,
				scrollTop: 0
			};
		},
		watch: {
			activeTopicIndex: {
				handler() {
					if (this.topicId == 'vote') {
						if (this.activeTopicIndex == this.topicIndex) {
							this.getPrompts()
						}
					} else {
						if (this.topicIndex >= this.activeTopicIndex - 1 && this.topicIndex <= this.activeTopicIndex + 1 && this.promptList === null) {
							this.getPrompts()
						}
					}
					
				},
				immediate: true
			}
		},
		methods: {
			getPrompts(keyword = '') {
				const page = this.page;
				const pagesize = this.pagesize;
				let url = '/write/getPrompts'
				if(this.topicId == 'vote') {
					url = '/write/getVotePrompts'
				}
				if (keyword) {
					uni.showLoading({
					  title: '搜索中',
					})
				}
				app.globalData.util
					.request({
						url: url,
						data: {
							topic_id: this.topicId,
							keyword: keyword,
							page: page,
							pagesize: pagesize
						},
						loading: page === 1 ? false : true
					})
					.then((res) => {
						this.setData({
							promptList: res.data.list,
							promptCount: res.data.count,
							scrollTop: 0
						});
						uni.hideLoading();
					}).catch(() => {
						uni.hideLoading()
					});
			},
			clearList() {
				this.promptList = null;
				this.promptCount = 0;
				this.page = 1;
				this.scrollTop = 0;
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},

			pageChange(e) {
				this.setData({
					page: e.detail
				});
				this.getPrompts();
			},

			doVote(e) {
				const prompt_id = e.currentTarget.dataset.id;
				app.globalData.util.request({
					url: '/write/votePrompt',
					data: {
						prompt_id: prompt_id
					}
				}).then((res) => {
					app.globalData.util.message(res.message);
					var promptList = this.promptList;
					for (var i in promptList) {
						if (promptList[i].id == prompt_id) {
							if (promptList[i].isVote) {
								promptList[i].isVote = 0;
							} else {
								promptList[i].isVote = 1;
							}
						}
					}
					this.setData({
						promptList: promptList
					});
				}).catch(res => {
					if (res.errno == 403) {
						app.globalData.util.toLogin('请登录');
					}
				})
			},

			toWriteChat(e) {
				const id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/write/chat?prompt_id=' + id
				});
			}
		}
	};
</script>
<style>
	.prompt-list {
		width: 100%;
		height: 100%;
		padding: 10rpx 0 0 24rpx;
		box-sizing: border-box;
	}

	.prompt-item {
		background: #fff;
		padding: 20rpx 30rpx;
		border-radius: 14rpx;
		margin: 20rpx 20rpx 0 0;
		float: left;
		width: 280rpx;
		font-family: '微软雅黑';
		height: 220rpx;
		overflow: hidden;
		position: relative;
	}

	.prompt-item:active {
		background: #f2f2f2;
	}

	.prompt-item .title {
		font-size: 28rpx;
		font-weight: bold;
		line-height: 44rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		display: flex;
		align-items: flex-start;
	}
	
	.prompt-item .title .icon {
	    width: 32rpx;
	    height: 32rpx;
	    min-width: 32rpx;
	    margin: 4rpx 10rpx 0 0;
	}

	.prompt-item .desc {
		font-size: 24rpx;
		color: #888;
		margin-top: 10rpx;
		line-height: 36rpx;
		height: 108rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.prompt-item .ops {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}

	.prompt-item .ops .op-item {
		display: flex;
		align-items: center;
		color: #8e8ea0;
		font-size: 24rpx;
	}

	.prompt-item .ops .op-item .icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 4rpx;
	}

	.empty {
		text-align: center;
		margin: 0 60rpx;
		padding: 80rpx 0 100rpx 0;
		margin-top: 120rpx;
		border-radius: 20rpx;
	}

	.empty image {
		width: 240rpx;
		height: 240rpx;
	}
</style>